﻿@{
    ViewBag.Title = "个人推广统计";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
    <div class="col-lg-12">
        <div class="main-box">
            <header class="main-box-header clearfix">
                <h2>个人推广统计</h2>
            </header>
            <div class="main-box-body clearfix">
                <div class="row">
                    <div class="col-lg-12" style="margin-top:20px;margin-bottom:20px">
                        <button type="button" onclick="StartDate(1)" class="btn btn-success btn-sm">本月</button>
                        <button type="button" onclick="StartDate(2)" class="btn btn-primary btn-sm">上月</button>
                        <button type="button" onclick="StartDate(3)" class="btn btn-success btn-sm">昨天</button>
                        <button type="button" onclick="StartDate(4)" class="btn btn-info btn-sm">最近7天</button>
                        <button type="button" onclick="StartDate(5)" class="btn btn-danger btn-sm">最近15天</button>
                        <button type="button" onclick="StartDate(6)" class="btn btn-danger  btn-facebook btn-sm">最近30天</button>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-calendar-o"></i></span>
                                    <input type="text" class="form-control" id="Starttime">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <div class="input-group ">
                                    <span class="add-on input-group-addon"><i class="fa fa-calendar-o"></i></span>
                                    <input type="text" class="form-control" id="Endtime">

                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <div class="controls ">
                                    <select class="form-control" id="tgw">
                                        <option value="0">不限定推广类型</option>
                                        <option value="1">网站推广</option>
                                        <option value="2">微信推广</option>
                                        <option value="3">QQ推广</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-recycle"></i></span>
                                    <input type="text" class="form-control" placeholder="联盟账号成员ID" id="aliID">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <div class="input-group ">
                                    <span class="add-on input-group-addon"><i class="fa fa-user"></i></span>
                                    <input type="text" class="form-control" placeholder="终端推广用户账号" id="userid">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <div class="controls ">
                                    <button type="button" id="search" class="btn btn-lg btn-success   ">
                                        &nbsp; &nbsp; 查询&nbsp; &nbsp;
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>












            </div>
        </div>
    </div>
</div>

<div class="row"  id="viewCrat">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-6">
                <div class="main-box">
                    <header class="main-box-header clearfix">
                        <h2>点击统计</h2>
                    </header>
                    <div class="main-box-body clearfix">
                        <div id="graph_bar"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="main-box">
                    <header class="main-box-header clearfix">
                        <h2>订单统计</h2>
                    </header>
                    <div class="main-box-body clearfix">
                        <div id="hero-bar"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6">
                <div class="main-box">
                    <header class="main-box-header clearfix">
                        <h2>预估统计</h2>
                    </header>
                    <div class="main-box-body clearfix">
                        <div id="yugu"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="main-box">
                    <header class="main-box-header clearfix">
                        <h2>结算统计</h2>
                    </header>
                    <div class="main-box-body clearfix">
                        <div id="jiesuan"></div>
                    </div>
                </div>
            </div>
        </div>
        </div></div>
        @section Scripts{
            <script type="text/javascript" src="~/Scripts/sys/lib/common_raw.js"></script>
            <script src="~/Scripts/plugins/layer/layer.min.js"></script>
            <script src="/js/raphael-min.js"></script>
            <script src="/js/morris.js"></script>
            <script type="text/javascript">
                function LoadCart(day_data) {
                   
                     Morris.Bar({
                        element: 'graph_bar',
                        data: day_data,
                        xkey: 'CreateDate',
                        ykeys: ['ClickNum'],
                        labels: ['点击数'],
                        barRatio: 0.1,
                        barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
                        xLabelAngle: 35,
                        hideHover: 'auto'
                    });

                     

                     Morris.Bar({
                        element: 'hero-bar',
                        data: day_data,
                        barColors: ['#A9D86E', '#FF6C60', '#f39c12', '#3fcfbb', '#626f70', '#8f44ad'],


                        xkey: 'CreateDate',
                        ykeys: ['PayNum'],
                        labels: ['订单数'],
                        barRatio: 0.4,
                        xLabelAngle: 35,
                        hideHover: 'auto',
                        resize: true
                    });

                 
                     Morris.Bar({
                        element: 'yugu',
                        data: day_data,
                        barColors: ['#FF6C60', '#F3565D', '#ACADAC', '#3498DB'],
                        xkey: 'CreateDate',
                        ykeys: ['Estimate'],
                        labels: ['预估收入'],
                        barRatio: 0.4,
                        xLabelAngle: 35,
                        hideHover: 'auto',
                        resize: true
                    });

                     Morris.Bar({
                        element: 'jiesuan',
                        data: day_data,
                        barColors: ['#FF4500', '#FF4500', '#ACADAC', '#3498DB'],
                        xkey: 'CreateDate',
                        ykeys: ['Income'],
                        labels: ['结算收入'],
                        barRatio: 0.4,
                        xLabelAngle: 35,
                        hideHover: 'auto',
                        resize: true
                    });
                }

                function Init() {
                    var param = {};
                    param.Starttime = $("#Starttime").val();
                    param.Endtime = $("#Endtime").val();
                    param.tgw = $("#tgw").val();
                    param.aliID = $("#aliID").val();
                    param.userid = $("#userid").val();
                    $.ajax({
                        type: "Post",
                        url: "/GetUserExtension.html",
                        cache: false,
                        data: param,
                        dataType: "json",
                        success: function (data) {
                            var dd = CreateDate(data);
                            if (dd) {
                                LoadCart(dd.Datas.Rows);
                            }
                        }
                    });
                }
                $(document).ready(function () {
                    $("#Starttime").val(Get7day(-29));
                    $("#Endtime").val(formatDate(now));
                    $("#search").bind("click", function ()
                    {
                        $("#graph_bar").children().remove();
                        $("#hero-bar").children().remove();
                        $("#yugu").children().remove();
                        $("#jiesuan").children().remove();
                        Init();
                    });
                    Init();
                });

               
                function CreateDate(data)
                {
                   
                    for (var i = 0; i < data.Datas.Rows.length; i++)
                    {

                        var birthdayMilliseconds = parseInt(data.Datas.Rows[i].CreateDate.replace(/\/Date\(/igm, ""));
                        data.Datas.Rows[i].CreateDate = new Date(birthdayMilliseconds).Format("yyyy-MM-dd");
                    }
                   
                    return data;
                }

                var now = new Date();
                var nowDay = now.getDate();
                var nowMonth = now.getMonth();
                var nowYear = now.getFullYear();
                var lastMonthDate = new Date();
                lastMonthDate.setDate(1);
                lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
                var lastYear = lastMonthDate.getYear();
                var lastMonth = lastMonthDate.getMonth();

                function formatDate(date) {
                    var myyear = date.getFullYear();
                    var mymonth = date.getMonth() + 1;
                    var myweekday = date.getDate();

                    if (mymonth < 10) {
                        mymonth = "0" + mymonth;
                    }
                    if (myweekday < 10) {
                        myweekday = "0" + myweekday;
                    }
                    return (myyear + "-" + mymonth + "-" + myweekday);
                }

                function getMonthStartDate() {
                    var monthStartDate = new Date(nowYear, nowMonth, 1);

                    return nowYear + "-" + (nowMonth + 1) + "-" + "1";
                }

                function GetYesterday() {
                    var monthEndDate = new Date(nowYear, nowMonth, nowDay - 1);
                    return formatDate(monthEndDate);
                }
                function Get7day(day) {
                    var monthEndDate = new Date(nowYear, nowMonth, nowDay + day);
                    return formatDate(monthEndDate);
                }

                function getMonthEndDate() {
                    var monthEndDate = new Date(nowYear, nowMonth, getMonthDays(nowMonth));
                    return formatDate(monthEndDate);
                }

                function getLastMonthStartDate() {
                    var lastMonthStartDate = new Date(nowYear, lastMonth, 1);
                    return formatDate(lastMonthStartDate);
                }

                function getMonthDays(myMonth) {
                    var monthStartDate = new Date(nowYear, myMonth, 1);
                    var monthEndDate = new Date(nowYear, myMonth + 1, 1);
                    var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
                    return days;
                }

                function getLastMonthEndDate() {
                    var lastMonthEndDate = new Date(nowYear, lastMonth, getMonthDays(lastMonth));

                    return formatDate(lastMonthEndDate);
                }

                function StartDate(obj) {
                    switch (obj) {
                        case 1:
                            $("#Starttime").val(getMonthStartDate());
                            $("#Endtime").val(formatDate(now));
                            break;
                        case 2:
                            $("#Starttime").val(getLastMonthStartDate());
                            $("#Endtime").val(getLastMonthEndDate());
                            break;
                        case 3:
                            $("#Starttime").val(GetYesterday());
                            $("#Endtime").val(GetYesterday());
                            break;
                        case 4:
                            $("#Starttime").val(Get7day(-6));
                            $("#Endtime").val(formatDate(now));
                            break;
                        case 5:
                            $("#Starttime").val(Get7day(-14));
                            $("#Endtime").val(formatDate(now));
                            break;
                        case 6:
                            $("#Starttime").val(Get7day(-29));
                            $("#Endtime").val(formatDate(now));
                            break;
                    }
                }
            </script>
        }












